<template>
  <div>
   
    <div class="checked-device">
      <div class="checked-device-title"><span>维修设备</span></div>
      <h-table-list
        border
        type="local"
        :data="tableData"
        :page-sizes="[10, 20]"
        :columns="columns"
      >
        <!-- <ListOpearteButton /> -->
        <el-button @click="addCheckedDevice">添加点位设备</el-button>
        <span>只可选择台账状态【启用】的设备，提交审批后不可更改</span>
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
      </h-table-list>
    </div>
  
    <div>
      <FormEdit :dataForm="operateForm0" />
    </div>
    <div class="check-device-buttons">
      <el-button type="primary" class="submit_btn" @click="()=>submit(0)">存草稿</el-button>
      <el-button type="primary" class="submit_btn" @click="()=>submit(1)">提交</el-button>
      <el-button type="primary" class="submit_btn" @click="submit">取消</el-button>
    </div>
    <DownloadIdentify
      @cancel="cancel"
      @update="addChooseDevices"
      :visible.sync="dialogDeviceVisible"
      title="添加维修设备"
    >
      <h-table-list
        border
        type="local"
        :data="tableData3s"
        :page-sizes="[10, 20]"
        :columns="column3s"
        :form-options="formOptions2s"
        ref="addCheckDeviceTable"
        @selection-change="handleSelectionChange"
      >
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
        <template slot="operate-column" slot-scope="scope">
          <tableButton :row="scope.row" />
        </template>
      </h-table-list>
    </DownloadIdentify>
 
  </div>
</template>

<script>
import FormEdit from "@/components/formEdit/index";
import ListOpearteButton from "@/components/AllButton/button2";
import DownloadIdentify from "@/components/FormDialog";
import CacelButton from '@/components/AllButton/cancel'
import data from "./const";
import { uniComplexArr } from "@/utils";
export default {
  components: { FormEdit, ListOpearteButton, DownloadIdentify },
  
  data() {
    return {
      //维修项数据
      productRuleForm: {
        tableData: [
          {
            part: "", //维修部位
            content: "", //维修内容
            standard: "", //维修基准 非必须
            method: "", //维修方法 非必须
            upPicFlag: 0, //上传图片 0不上传 1选填 2必填
            upVideoFlag: 0, //上传图片 0不上传 1选填 2必填
          },
        ],
        rules: {
          part: [{ required: true, message: "请选择日期", trigger: "blur" }],
          content: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          standard: [
            { required: true, message: "请输入电话号码", trigger: "blur" },
          ],
          method: [{ required: true, message: "请输入地址", trigger: "blur" }],
          upPicFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
          upVideoFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
        },
      },
      chooseDevices: [],
      chooseItems: [],
      formOptions2s: {
        inline: true,
        submitBtnText: "搜索",
        forms: [
          { prop: "name", label: "计划名称" },
          { prop: "mobile", label: "设备名称" },

          {
            prop: "sex",
            label: "使用部门",
            itemType: "select",
            options: [
              { value: "", label: "部门1" },
              { value: 0, label: "部门2" },
              { value: 1, label: "部门3" },
            ],
          },
        ],
      },
      dialogDeviceVisible: false,
      dialogPartVisible: false,
      tableData: [],
      tableData2s: [
        { id: 0, checkContent: "22" },
        { id: 1, checkContent: "22" },
        { id: 2, checkContent: "22" },
      ],
      tableData3s: [{ id: 1 }, { id: 2 }, { id: 3 }],
      data,
      formData0:data.basicForm0,
      operateForm0:data.operateForm0,
      columns: [
        { prop: "id", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        
      ],
      column2s: [
        { type: "index", label: "序号" },
        { prop: "id", label: "序号", width: 140 },
        {
          prop: "name",
          label: "维修部位",
          minWidth: 180,
          slotName: "operate-part",
        },

        {
          prop: "deviceName",
          label: "维修内容",
          width: 100,
          slotName: "operate-content",
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "维修基准",
          width: 100,
          slotName: "operate-standard",
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        {
          prop: "departmentName",
          label: "维修方法",
          minWidth: 180,
          slotName: "operate-method",
        },
        {
          prop: "membName",
          label: "上传图片",
          minWidth: 180,
          slotName: "is-uploadimg",
        },
        {
          prop: "membName",
          label: "上传视频",
          minWidth: 180,
          slotName: "is-uploadvideo",
        },
        {
          prop: "operate",
          label: "操作",
          minWidth: 240,
          slotName: "operate-button",
        },
      ],
      column3s: [
        { prop: "id", type: "selection", width: 140 },
        { prop: "id", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "departmentName", label: "使用部门", minWidth: 180 },
        { prop: "departmentName", label: "设备类别", minWidth: 180 },
        { prop: "departmentName", label: "设备分类", minWidth: 180 },
        { prop: "departmentName", label: "责任人", minWidth: 180 },
      ],
    };
  },
  watch:{
    //这里处理为数据监听改变form的配置来实现业务上的模板更换,后续考虑优化
    'data.basicForm0.0.formModel.planPeriodType':
    {
      handler:function(val){
         console.log("深度监听",val)
         if(val=="0"){
           //定期
            this.formData0=this.data.basicForm0
            console.log(this.formData0)
         }else if(val=="1"){
           //日常
            this.formData0=this.data.basicForm1
            console.log(this.formData0)
         }
         },
     deep: true,
    immediate: true
    },
    'data.operateForm0.0.formModel.membType':
    {
      handler:function(val){
         console.log("深度监听",val)
         if(val=="0"){
           //指定人员
            this.operateForm0=this.data.operateForm0
         }else if(val=="1"){
           //指定部门
            this.operateForm0=this.data.operateForm1
         }
         },
     deep: true,
    immediate: true
    },
    
  },
  mounted(){
    console.log(this.data,"批量导入的表格数据")
  },
  methods: {
    addCheckedDevice() {
      console.log("添加点位设备");
      this.dialogDeviceVisible = true;
    },
    addCheckedItems() {
      console.log("添加点位项目");
      this.dialogPartVisible = true;
    },
    addCheckedNocontentItem() {
      //添加空白维修项
      //this.tableData2s.push({id:this.tableData2s.length})
      this.productRuleForm.tableData.push({
        date: "",
        name: "",
        phone: "",
        address: "",
      });
    },
    handleSelectionChange(row) {
      console.log("选择维修设备", row);
    },
    handleSelectionItemsChange(row) {
      console.log("选择维修项目", row);
      this.chooseItems = row;
    },
    addChooseDevices(row) {
      console.log(this.chooseDevices);
      this.tableData.push(...this.chooseDevices);
      // this.tableData=uniComplexArr(this.tableData)
      this.dialogDeviceVisible = false;
    },
    addChooseItems(row) {
      console.log(this.chooseDevices);
      this.tableData2s.push(...this.chooseItems);
      console.log(this.tableData2s);
      // this.tableData=uniComplexArr(this.tableData)
      this.dialogPartVisible = false;
    },

    // 提交数据
    submit() {
      this.$refs["productRuleForm"].validate((valid) => {
        console.log(valid);
        console.log(this.$refs["productRuleForm"]);
        console.log(this.productRuleForm.tableData);
        if (valid) {
        } else {
        }
      });
    },
  },
};
</script>

<style lang="scss">
.checked-device{
    background: white;
    margin: 10px 0;
    padding: 20px;
    .checked-device-title{
      margin:10px 0;
      font-size:16px;
    }

}
.check-device-buttons{
  margin:20px 0;
  text-align: center;
}
</style>